<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <!-- import CSS -->
    <title>ElasticSearch练习项目</title>
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
</head>
<body>
<div id="app">
    <el-col :span="6" :offset="10"><h3>豆瓣电影 Top 250</h3></el-col>

    <el-row :gutter="20">
        <el-col :span="6" :offset="8">
            <el-input v-model="searchName" placeholder="请输入搜索电影"
            >Button
            </el-input
            >
        </el-col>
        <el-col :span="6" :offset="0">
            <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索
            </el-button
            >
        </el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="12" :offset="6">
            <el-button
                    v-for="(item,index) in buckets"
                    :key="index"
                    type="primary"
                    plain
                    size="small"
                    style="margin: 10px 10px"
                    @click="typeClick(item.key)"
            >
                {{ item.key }} {{ item.docCount }}
            </el-button>
        </el-col>
    </el-row>

    <el-col :span="12" :offset="6" v-loading="loading">
        <el-card
                v-for="(item,index) in results"
                :key="index"
                style="margin-bottom: 20px"
        >
            <b v-html="item.title"></b>
            <p>{{item.content}}</p>
            <p>地区：{{item.country}}</p>
            <p>类型：{{item.type}}</p>
            <el-row>
                <el-col :span="3">
                    <span>豆瓣分数：{{item.score}}</span>
                </el-col>

                <el-col :span="4"
                >
                    <el-rate
                            :value="item.score/2"
                            disabled
                            allow-half
                            text-color="#ff9900"
                    >
                    </el-rate
                    >
                </el-col>
                <span>共{{item.evaluation}}人评价</span>
            </el-row>
        </el-card>
    </el-col>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loading: false,
                searchName: undefined,
                results: [],
                buckets: [],
            }
        },
        created() {
            this.loading = true
            axios.get('/list').then((res) => {
                this.results = res.data
                this.loading = false
            })
            axios.get('/type').then((res) => {
                this.buckets = res.data
            })
        },
        methods: {
            typeClick(data) {
                this.loading = true
                axios.get('/list/' + data).then((res) => {
                    this.results = res.data
                    this.loading = false
                })
            },
            search() {
                this.loading = true
                axios.get('/search/' + this.searchName).then((res) => {
                    this.results = res.data
                    this.loading = false
                    this.searchName = undefined
                })
            },
        },
    })
</script>
</html>